<template>
    <div class="education">
    
        <div class="content">
            <router-link to="/function/education/apple" class="item">
                <div class="img-box">
                    <img src="@/assets/images/Apple-logo.png" />
                    <P>Apple</P>
                </div>
                <div class="text">
                    <h2>支持的产品：</h2>
                    <p  class="tb">MacBook Air(M1,M2)</p>
                    <p>MacBook Pro</p>
                    <p>iMac</p>
                    <p>Mac mini</p>
                    <p>Mac Studio</p>
                    <p>Studio Display</p>
                    <p>Pro Display XDR</p>
                    <p>Mac Pro</p>
                    <p>iPad(Pro,Air,mini)</p>
                </div>
            </router-link>
            <router-link to="/function/education/adobe"  class="item">
                <div class="img-box">
                    <img src="@/assets/images/Apple-logo (1).png" />
                    <P>Adobe</P>
                </div>
                <div class="text">
                    <h2>支持的产品：</h2>
                    <p  class="tb">Creative Cloud All Apps</p>
                    <p>100GB云空间</p>
                  
                </div>
            </router-link>
            <router-link to="/function/education/microsoft"  class="item">
                <div class="img-box">
                    <img src="@/assets/images/Apple-logo (2).png" />
                    <P>Microsoft</P>
                </div>
                <div class="text">
                    <h2>支持的产品：</h2>
                    <p class="tb">Suface(Pro9,Laptop5 Laptop Studio, Surface Go3)</p>
                   
                   
                </div>
            </router-link>
            <router-link to="/function/education/autodesk"  class="item">
                <div class="img-box">
                    <img src="@/assets/images/Apple-logo (3).png" />
                    <p>Autodesk</p>
                </div>
                <div class="text">
                    <h2>支持的产品：</h2>
                    <p>Fusion 360</p>
                    <p>Revit</p>
                    <p>AutoCAD</p>
                    <p>3D Max</p>  
                    <p>Maya</p>
                    <p>Civil 3D</p>
                    <p>其他</p>
                  
                </div>
            </router-link>
            <router-link to="/function/education/parallel"  class="item">
                <div class="img-box">
                    <img src="@/assets/images/Parallels_logo.svg.png" style="margin-top:35px;width:144px;height: 31px;margin-bottom: 30px;" />
                    <P>Parallels(Mac OS)</P>
                </div>
                <div class="text">
                    <h2>支持的产品：</h2>
                    <p>Parallels Desktop</p>
                    <p>for Mac Standard</p>
                   
                </div>
            </router-link>
        </div>
    </div>
</template>
<style lang="less" scoped>
    .education{
        width: 1200px;
    margin: 0 auto;
    padding:20px 0;
    min-height: 600px;
    h1{
        font-family: 'MicrosoftYaHei-Bold';
        font-weight: bold;
        font-size: 26px;
        color: rgba(56,23,129,1);
    }
    .tit{
        margin-top: 20px;
        background: #E9ECEF;
        height: 90px;
        width: 100%;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 15px 30px;
        font-size: 16px;
        color: rgba(56,23,129,1);
    }
    .content{
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
        .item{
            display: block;
            text-decoration: none;
            width: 181px;
            .img-box{
                text-align: center;
                width: 181px;
                height: 161px;
                box-sizing: border-box;
                padding-top:10px;
                border:solid 1px rgba(112,112,112,0.16);
                box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
                img{
                    width: 90px;
                    height: 90px;
                    margin-bottom: 10px;
                }
               p{
                    font-weight: 400;
                    font-size: 20px;
                    font-family: 'MicrosoftYaHeiLight';
                    color: rgba(56,23,129,1);
                }
            }
            .text{
            margin-top: 20px;
            h2{
                font-weight: 400;
                    font-size: 20px;
                    font-family: 'MicrosoftYaHeiLight';
                    color: rgba(56,23,129,1);
                    padding-bottom: 15px;
            }
            p{
                font-family: 'MicrosoftYaHei';
                font-weight: 400;
                font-size: 18px;
                color: rgba(56,23,129,1);
                margin-bottom: 5px;
                position: relative;
                padding-left: 15px;
               &::before{
                content: '';
                    position: absolute;
                    height: 8px;
                    width: 8px;
                    left: 0px;
                    top:50%;
                    margin-top:-5px;
                    border-radius: 50%;
                    background:rgba(56,23,129,1);
                }
                &.tb::before{
                    top: 15px;
                    
                }
            }
        }

        }
       
    }
    }
</style>